<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo-18</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<!-- 关于 VueComponent
    1、school 组件本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend 生成的

    2、我们只需要写 <school></school>， Vue 解析时会帮我们创建 school 组件的实例对象，
    即 Vue 帮我们执行的： new VueComponent(options)

    3、特别注意：每次调用 Vue.extend，返回的都是一个全新的 VueComponent

    4、关于 this 指向：
        （1）组件配置中：data 函数、methods 中的函数、watch 中的函数、component 中的函数 他们的 this 均是 VueComponent 实例对象

        （2）new Vue（options）配置中：data 函数、methods 中的函数、watch 中的函数 他们的 this 均是 Vue 实例对象

    5、VueComponent 的实例对象，以后简称 vc（也可称为：组件实例对象）
        Vue 的实例对象，以后简称 vm
-->
<div id="root">
</div>
<script>
    const student = Vue.extend({
        name: 'student',
        template: `
          <div>
          <h3>学生名称: {{ name }}</h3>
          <h3>学生年龄: {{ age }}</h3>
          </div>
        `,
        data() {
            return {
                name: '张三',
                age: 19,
            }
        }
    })

    // 创建组件
    const school = Vue.extend({
        name: 'school',
        template: `
          <div>
          <h3>学校名称: {{ name }}</h3>
          <h3>学校地址: {{ address }}</h3>
          <hr>
          <student></student>
          </div>
        `,
        data() {
            return {
                name: '尚硅谷',
                address: '北京昌平',
            }
        },
        components: {
            student,
        }
    })

    console.log(school)

    const app = Vue.extend({
        template: `
          <div>
          <school></school>
          </div>
        `,
        components: {
            school,
            student,
        }
    })

    new Vue({
        template: `
          <app></app>
        `,

        el: '#root',

        // 注册组件(局部注册)
        components: {
            app
        }
    })
</script>
</body>
</html>